import styled from "styled-components";
import Emoji from "../ui/Emoji";
import Heading from "../ui/Heading";
import { useNavigate } from "react-router-dom";
import Logo from "../ui/Logo";
import BackgroundVideo from "../ui/BackgroundVideo";
import { HiArrowDownRight, HiChatBubbleLeftRight } from "react-icons/hi2";
import IconButton from "../ui/IconButton";

const StyledHomePage = styled.div`
  min-width: 70vw;
  min-height: 75vh;
  display: grid;
  grid-template-columns: 2fr 1fr;
  background-color: var(--color-grey-100);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0.8;
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 75% 0, 50% 100%, 0 100%);
`;

const Container = styled.div`
  grid-area: 1/1/2/2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
`;

const VerticalText = styled.div`
  position: absolute;
  top: 3%;
  right: 10%;

  user-select: none;
  color: var(--color-grey-0);
  writing-mode: vertical-lr;
  text-align: center;
  font-size: 6.4rem;
  font-weight: 600;
  letter-spacing: 2.4rem;
  height: 100%;
  transform: rotate(25deg);
  transform-origin: top left;
  display: flex;
  align-items: center;
  justify-content: center;
`;

function HomePage() {
  const navigate = useNavigate();

  function handleClick() {
    navigate("/app");
  }

  return (
    <>
      <BackgroundVideo src="/video.webm" />

      <StyledHomePage>
        <Container>
          <Logo />
          <Heading as="h1">让每次对话都有意义</Heading>
          <Emoji />
          <IconButton
            icon={<HiChatBubbleLeftRight />}
            text="即刻畅谈"
            onClick={handleClick}
          />
        </Container>
      </StyledHomePage>
      <VerticalText>&ldquo;聆听自己与他人&rdquo;</VerticalText>
    </>
  );
}

export default HomePage;
